<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选项卡</title>
</head>
<style>
    .content {
        width: 300px;
        height: 332px;
        margin: 30px auto;
        /*border: 1px solid pink;*/
        position: relative;
    }

    .nav-box span {
        width: 98px;
        height: 30px;
        font-size: 20px;
        border: 1px solid #e5e5e5;
        line-height: 30px;
        float: left;
        background: #20B2AAFF;
        text-align: center;
        cursor: pointer;
    }

    .nav-box .nav-active {
        background: #fd792a;
    }


    .b-box div {
        font-size: 50px;
        width: 300px;
        height: 300px;
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        left: 0;
        top: 32px;
        background: bisque;

        opacity: 0;
    }

    .b-box .box-active {
        opacity: 1;
    }

</style>
<body>
<div class="content">
    <div class="nav-box">
        <span class="nav nav-active">1</span>
        <span class="nav">2</span>
        <span class="nav">3</span>
    </div>
    <div class="b-box">
        <div class="box box-active">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
    </div>
</div>

<script>
    var navs = document.querySelectorAll('.nav')
    var tabs = document.querySelectorAll('.box')

    // console.log(navs[0].)

    //2.给Navs里面所有按钮添加点击事件
    navs.forEach(function (item, index) {

        item.onclick = function () {

            //2-2.给navs和tabs里面的所有内容取消active类名
            navs.forEach(function (t, i) {
                t.className = ''
                // t.style.background = '#20B2AAFF'
                tabs[i].className = ''
            })

            item.className='nav-active'
            // item.style.background = '#fd792a'
            tabs[index].className = 'box-active'
        }
    })

</script>
</body>
</html>